<template>
  <div class="profile">
      <div class="card-body">
        <el-form ref="userForm" :model="userProfile" :rules="dataRules" label-width="100px">
          <el-form-item label="用户名：" prop="username">
            <span>{{userProfile.username}}</span>
          </el-form-item>
          <el-form-item label="用户姓名：" prop="nickName">
            <el-input v-model="userProfile.nickName"/>
          </el-form-item>
          <el-form-item label="性别：" prop="genderCode">
            <el-select v-model="userProfile.genderCode">
              <el-option
                v-for="item in zdSex"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话：" prop="phone">
            <el-input v-model="userProfile.phone"/>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="userProfile.email" type="email"/>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-button size="small" type="text" @click="showEditPassword">修改密码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100px" @click="saveEdit">保存</el-button>
            <el-button type="error" style="width: 100px" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    <el-dialog :visible.sync="editPasswordModal" width="500">
      <h3 slot="title" class="model-header">修改密码</h3>
      <el-form ref="editPasswordForm" :model="editPasswordForm" label-width="100px" label-position="right"
            :rules="passwordValidate">
        <el-form-item label="原密码" prop="oldPass">
          <el-input v-model="editPasswordForm.oldPass" type="password" placeholder="请输入旧密码"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="editPasswordForm.newPass" type="password" placeholder="请输入新密码，至少6位字符"/>
        </el-form-item>
        <el-form-item label="确认新密码" prop="rePass">
          <el-input v-model="editPasswordForm.rePass" type="password" placeholder="请再次输入新密码"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</el-button>
        <el-button type="text" @click="cancelEditPass">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data () {
    const validePhone = (rule, value, callback) => {
      if (!value) callback()
      var re = /^1[0-9]{10}$/
      if (!re.test(value)) {
        callback(new Error('请输入正确格式的手机号'))
      } else {
        callback()
      }
    }
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      zdSex: [{ code: '1', name: '男性' }, { code: '2', name: '女性' }],
      dataRules: {
        nickName: [
          { required: true, trigger: 'blur', message: '请输入姓名' }
        ],
        phone: [
          { validator: validePhone }
        ]
      },
      editPasswordModal: false, // 修改密码模态框显示
      editPasswordForm: {
        oldPass: '',
        newPass: '',
        rePass: ''
      },
      savePassLoading: false,
      passwordValidate: {
        oldPass: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
          { max: 32, message: '最多输入32个字符', trigger: 'blur' }
        ],
        rePass: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: valideRePassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userProfile () {
      return this.$store.state.auth.user
    }
  },
  methods: {
    cancel () {
      this.$router.go(-1)
    },
    showEditPassword () {
      this.editPasswordModal = true
      this.editPasswordForm = {
        oldPass: '',
        newPass: '',
        rePass: ''
      }
    },
    cancelEditPass () {
      this.editPasswordModal = false
    },
    // 修改密码
    saveEditPass () {
      this.$refs.editPasswordForm.validate((valid) => {
        if (valid) {
          this.savePassLoading = true
          this.$store.dispatch('updatePasswd', this.editPasswordForm).then(() => {
            this.savePassLoading = false
            this.$message({ message: '密码修改成功,请退出重新登录！', type: 'success' })

            setTimeout(() => {
              this.$store.dispatch('logout').then(() => {
                this.$router.push({ path: '/login' })
              })
            }, 1500)
          }).catch((err) => {
            this.$message({ message: err, type: 'success' })
            this.savePassLoading = false
          })
        }
      })
    },
    saveEdit () {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('updateUserProfile', this.userProfile).then(() => {
            this.$store.dispatch('getUserProfile').then(() => {
              this.$message({ message: '用户信息修改成功！', type: 'success' })
              this.editPasswordModal = false
            })
          }).catch(err => {
            this.$Message.error(err)
          })
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
  .profile {
    height: 100%;
    background-color: #fff;
    .title-text {
      vertical-align: middle;
      font-weight: 700;
      font-size: 14px;
    }

    .card-body {
      max-width: 400px;
      margin-left: 300px;
    }
  }
</style>
